/**
 * @mixin wh
 * @params $wid: 宽
 * @params $hei: 高 
 */ 
@mixin wh($wid, $hei) {
	@if $wid {
		width: $wid;
	}
	@if $hei {
		height: $hei;
	}
}

/**
 * @mixin pos 定位
 * @params $ver, $hor: 垂直、水平方向 
 * @params $verVal, $horVal: 垂直、水平方向的值 
 */ 

@mixin pos-a($width, $height, $ver, $hor, $verVal: 0, $horVal: 0) {
	position: absolute;
	@if ($ver == 'top') {
		top: $verVal;
	} @else if ($ver == 'bottom') {
		bottom: $verVal;
	} @else if ($ver == 'center') {
		top: 50%;
		margin-top: -$width/2;
	}
	
	@if ($hor == 'left') {
		left: $horVal;
	} @else if ($hor == 'right') {
		right: $horVal;
	} @else if ($hor == 'center') {
		left: 50%;
		margin-left: -$height/2;
	}
	
	@if ($width & & $height) {
		@include wh($width, $height)
	}
}

@mixin pos-f($ver, $hor, $verVal: 0, $horVal: 0, $width: null, $height: null) {
	position: fixed;
	@if ($ver == 'top') {
		top: $verVal;
	} @else if ($ver == 'bottom') {
		bottom: $verVal;
	}
	
	@if ($hor == 'left') {
		left: $horVal;
	} @else if ($hor == 'right') {
		right: $horVal;
	}
	
	
	@if ($width & & $height) {
		@include wh($width, $height)
	}
	
}

/**
 * @mixin flex_box  flex布局
 * @params $justify, $align: 垂直、水平方向排布 
 * @params $direction: 垂直、水平方向的值 
 * @params $wrap: 是否换行 
 */ 
@mixin flex-box($justify: center, $align: center, $direction: null, $wrap: null) {
    display: flex;
	@if $justify {
		@if ($justify == 'jcsb') {
			justify-content: space-between;
		} @else if ($justify == 'jcsa') {
			justify-content: space-around;
		} @else if ($justify == 'fs') {
			justify-content: flex-start;
		} @else if ($justify == 'fe') {
			justify-content: flex-end;
		} @else {
			justify-content: $justify;
		}
	}
	@if $align {
		@if ($align == 'fs') {
			align-items: flex-start;
		} @else if ($align == 'fe') {
			align-items: flex-end;
		} @else {
			align-items: $align;
		}
	}
	@if $direction {
		flex-direction: $direction;
	}
	@if $wrap {
		flex-wrap: $wrap;
	}
}

/**
 * @mixin text-overflow  超出文本省略
 */ 
@mixin text-overflow($width:100%) {
  width: $width;
  max-width: $width;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

/**
 * 文本居中
 */ 
@mixin text-middle($align: center, $height: null) {
	text-align: $align;
	@if $height {
		height: $height;
		line-height: $height;
	}
}

/**
 * 文本样式
 */ 
@mixin txts($fs,$cl){
    @if $fs {
        font-size: $fs;
    }
    @if $cl {
        color: $cl;
    }
}

/**
 * 背景样式
 */ 
@mixin bg-style($bg, $width: null, $height: null, $radius: null) {
	background: $bg;
	@if ($width & & $height) {
		@include wh($width, $height)
	}
	@if ($radius != null) {
		-webkit-border-radius: $radius;
		-moz-border-radius: $radius;
		border-radius: $radius;
	}
}


/**
 * 登录输入框通用样式
 */ 
@mixin login-input-style() {
	@include bg-style(#F6F6F6, 640rpx, 24rpx, 48rpx);
	padding: 36rpx 30rpx;
	font-size: 26rpx;
	margin-top: 30rpx;
}


/**
 * 通用圆角按钮
 */ 
@mixin round-btn-style($color, $width, $height) {
	@include bg-style($color, $width, $height, 48rpx);
	@include flex-box();
	@include txts(30rpx, #ffffff);
}